import React, { useEffect, useState } from 'react'
import { Table, Input, Breadcrumb, Switch } from 'antd';
import { SearchOutlined } from '@ant-design/icons/lib/icons';
import { IInterViewShield, ISkillLabel, ISkillList, ISkillListQuery } from '@/utils';
import { getShieldList, gitInterviewManage } from '@/services';
import { history } from 'umi'

import stylesInterviewManage from './interviewManage.less'

const columns = [
    {
        title: '岗位名称',
        align: "center",
        render: (rows: ISkillList) => {
            return <span style={{ color: 'rgb(65, 157, 233)' }} onClick={() => { history.push({ pathname: '/teachers/interView/interviewRecord', query: { id: rows.interviewId } }) }}>{rows.stationName}</span>
        }
    },
    {
        title: '公司名称',
        dataIndex: 'companyName',
        align: "center"
    },
    {
        title: '面试时间',
        dataIndex: 'interviewTime',
        align: "center"
    },
    {
        title: '面试官',
        dataIndex: 'intervierManagement',
        align: "center"
    },
    {
        title: '专业',
        dataIndex: 'majorName',
        align: "center"
    },
    {
        title: '提交人',
        dataIndex: 'commitName',
        align: "center"
    },
    {
        title: '面试结果',
        dataIndex: 'status',
        align: "center",
        render: (status: ISkillList) => {
            if (Number(status) == 0) {
                return <span>不确定</span>
            } else if (Number(status) == 1) {
                return <span style={{ color: "#29cb97" }}>通过</span>
            } else if (Number(status) == 2) {
                return <span style={{ color: "red" }}>未通过</span>
            }
        }
    },
    {
        title: '录音文件',
        dataIndex: 'issoundrecord',
        align: "center",
        render: (issoundrecord: ISkillList) => {
            if (Number(issoundrecord) == 0) {
                return <span>无</span>
            } else if (Number(issoundrecord) == 1) {
                return <span>有</span>
            }
        }
    },
    {
        title: '屏蔽',
        align: "center",
        render: (rows: ISkillList) => {
            if (rows.status == 0) {
                return <Switch style={{ fontFamily: "微软雅黑" }} checkedChildren="开启" unCheckedChildren="关闭" onChange={() => { shieldClick(rows) }} />
            } else if (rows.status == 1 || rows.status == 2) {
                return <Switch style={{ fontFamily: "微软雅黑" }} checkedChildren="开启" unCheckedChildren="关闭" defaultChecked onChange={() => { shieldClick(rows) }} />
            }
        }

    },
];
function shieldClick(rows: ISkillList) {
    getShieldList({ interviewId: rows.interviewId, status: rows.status }).then(ok => {
        console.log(ok)
    })
}
const interviewManage: React.FC = (props) => {
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([])
    let [subs, setSubs] = useState('')
    let [sub, setSub] = useState()
    let [queryParams, setQueryParams] = useState<ISkillListQuery>({ isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false } as ISkillListQuery)
    let [skillList, setSkillList] = useState<ISkillList[]>()
    let [isMyInfo, setMyInfo] = useState(false);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [shield, setShield] = useState<IInterViewShield>()

    // 列表
    useEffect(() => {
        if (sub) {
            queryParams = { ...queryParams, majorId: subs, status: sub, isMyInfo, searchTitle: title }
        } else {
            queryParams = { ...queryParams, majorId: subs, status: "" as unknown as number, isMyInfo, searchTitle: title }
        }
        gitInterviewManage(queryParams).then(ok => {
            if (ok.code == 200) {
                console.log(ok.rows)
                setSkillList(ok.rows)
            }
        })
    }, [subs, sub, isMyInfo, searchTitle, shield])

    return <div className={stylesInterviewManage.postSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>面试</Breadcrumb.Item>
            <Breadcrumb.Item>面试记录管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className={stylesInterviewManage.main}>
            <div className={stylesInterviewManage.nav}>
                <div></div>
                <span className={stylesInterviewManage.spans}> <Input placeholder="搜索岗位,公司名称" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} /></span>
            </div>

            <Table style={{ width: "95%", margin: "0 auto", textAlign: "center" }} rowKey='interviewId' dataSource={skillList as ISkillList[]} columns={columns as any} />
        </div></div>
}

export default interviewManage